<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%" max-height="60vh" scroll>
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="基本信息" name="1">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">藏品总登记号：</span>
              <span class="info-value">{{ formData.generalAccessionNumber || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">编号类型：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_NUM_TYPE, formData.numberType) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">编号：</span>
              <span class="info-value">{{ formData.number || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">名称：</span>
              <span class="info-value">{{ formData.name || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">原名：</span>
              <span class="info-value">{{ formData.originalName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">年代：</span>
              <span class="info-value">{{ calcFlatEraName() || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">具体年代：</span>
              <span class="info-value">{{ formData.specificEra || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文物类别：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_CATEGORY, formData.category) || '-'
              }}</span>
            </div>
          </el-col>
          <!-- <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质地类别1：</span>
              <span class="info-value">{{
                flatCataNameCalc(formData.materialCategory1) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质地类别2：</span>
              <span class="info-value">{{
                flatCataNameCalc(formData.materialCategory2) || '-'
              }}</span>
            </div>
          </el-col> -->
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质地类别：</span>
              <span class="info-value">{{ calcFlatCataName() || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">件数：</span>
              <span class="info-value">{{ formData.numberOfCases || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_NUM_UNIT, formData.numberUnit) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">实际数量：</span>
              <span class="info-value">{{ formData.actualQuantity || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">通长：</span>
              <span class="info-value">{{ formData.sizeLength || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">通宽：</span>
              <span class="info-value">{{ formData.sizeWidth || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">通高：</span>
              <span class="info-value">{{ formData.sizeHeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">具体尺寸：</span>
              <span class="info-value">{{ formData.specificSize || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">质量范围：</span>
              <span class="info-value">{{ formData.weightRange || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">具体质量：</span>
              <span class="info-value">{{ formData.specificWeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_QUALITY_UNIT, formData.weightUnit) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文物级别：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_GRADE, formData.relicLevel) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文物来源：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_SOURCE, formData.relicSource) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">完残程度：</span>
              <span class="info-value">{{
                getDictLabel(DICT_TYPE.COLLECTION_CONDITION_STATUS, formData.completenessDegree) ||
                '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">完残状况：</span>
              <span class="info-value">{{ formData.completenessCondition || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">保存状态：</span>
              <span class="info-value">{{
                getDictLabel(
                  DICT_TYPE.COLLECTION_PRESERVATION_STATUS,
                  formData.preservationState
                ) || '-'
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">入藏时间范围：</span>
              <span class="info-value">{{ formData.collectionTimeRange || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">入藏年度：</span>
              <span class="info-value">{{ formData.collectionYear || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">藏品登记号：</span>
              <span class="info-value">{{ formData.collectionRegistrationNumber || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">版本：</span>
              <span class="info-value">{{ formData.version || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">存卷：</span>
              <span class="info-value">{{ formData.storageVolume || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">行政区划：</span>
              <span class="info-value">{{ formData.administrativeDivision || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位编码：</span>
              <span class="info-value">{{ formData.unitCode || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">单位名称：</span>
              <span class="info-value">{{ formData.unitName || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="扩展信息" name="2">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">画心尺寸-长：</span>
              <span class="info-value">{{ formData.paintingLength || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">画心尺寸-宽：</span>
              <span class="info-value">{{ formData.paintingWidth || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">画心尺寸-高：</span>
              <span class="info-value">{{ formData.paintingHeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">装裱尺寸-长：</span>
              <span class="info-value">{{ formData.mountingLength || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">装裱尺寸-宽：</span>
              <span class="info-value">{{ formData.mountingWidth || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">装裱尺寸-高：</span>
              <span class="info-value">{{ formData.mountingHeight || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">内容题材：</span>
              <span class="info-value">{{ formData.subjectMatter || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">技法风格：</span>
              <span class="info-value">{{ formData.techniqueStyle || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">款识信息：</span>
              <span class="info-value">{{ formData.inscriptionInfo || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">形状：</span>
              <span class="info-value">{{ formData.shape || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">钮式：</span>
              <span class="info-value">{{ formData.knobStyle || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">文字类型：</span>
              <span class="info-value">{{ formData.textType || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">边框特征：</span>
              <span class="info-value">{{ formData.borderFeature || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">印面尺寸：</span>
              <span class="info-value">{{ formData.sealSize || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">印文排列：</span>
              <span class="info-value">{{ formData.textArrangement || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">印文内容：</span>
              <span class="info-value">{{ formData.sealContent || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="藏品附件" name="3">
        <div class="info-item">
          <span class="info-label">附件信息：</span>
          <span class="info-value">{{ formData.attachments || '-' }}</span>
        </div>
      </el-tab-pane>
      <el-tab-pane name="4" :disabled="!formData.id">
        <template #label>
          <el-tooltip
            effect="dark"
            content="请先保存基本信息"
            placement="top-start"
            :disabled="!!formData.id"
          >
            <span>二维采集信息</span>
          </el-tooltip>
        </template>
        <collectionimageacquisition type="view" :data="formData" />
      </el-tab-pane>
      <el-tab-pane name="5" :disabled="!formData.id">
        <template #label>
          <el-tooltip
            effect="dark"
            content="请先保存基本信息"
            placement="top-start"
            :disabled="!!formData.id"
          >
            <span>三维采集信息</span>
          </el-tooltip>
        </template>
        <collection3dacquisition type="view" :data="formData" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { CollectionManagementApi, CollectionManagementVO } from '@/api/museum/collectionmanagement'
import { getDictDataByParentId } from '@/api/system/dict/dict.data'
import collectionimageacquisition from '../collectionimageacquisition/index.vue'
import collection3dacquisition from '../collection3dacquisition/index.vue'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('查看藏品信息') // 弹窗的标题
const activeTab = ref('1') // 活动的标签页
const formData = ref<CollectionManagementVO>({}) // 表单数据

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('详情')
  // 获取数据
  try {
    getDictData()
    formData.value = await CollectionManagementApi.getCollectionManagement(id)
  } catch (error) {
    message.error('获取藏品信息失败')
  }
}
const flatCataList = ref<any[]>([])
const flatEraList = ref<any[]>([])
const getDictData = () => {
  getDictDataByParentId({ parentId: 1 }).then((res) => {
    console.log('getDictDataByParentId res', res)
    flatCataList.value = res
  })
  getDictDataByParentId({ parentId: 1901 }).then((res) => {
    console.log('getDictDataByParentId res', res)
    flatEraList.value = res
  })
}
const flatCataNameCalc = (id: number | string | undefined) => {
  const item = flatCataList.value.find((item) => item.id + '' === id + '')
  return item?.label
}
// materialCategory1, materialCategory2, materialCategory3=material
const calcFlatCataName = () => {
  const values: string[] = []
  values.push(flatCataNameCalc(formData.value.materialCategory1))
  values.push(flatCataNameCalc(formData.value.materialCategory2))
  values.push(flatCataNameCalc(formData.value.material))
  return values.join('/')
}
const flatEraNameCalc = (id: number | string | undefined) => {
  const item = flatEraList.value.find((item) => item.id + '' === id + '')
  return item?.label
}
// chineseHistoricalEra,archaeologicalEra,geologicalEra,era
const calcFlatEraName = () => {
  const values: string[] = []
  values.push(flatEraNameCalc(formData.value.chineseHistoricalEra))
  values.push(flatEraNameCalc(formData.value.archaeologicalEra))
  values.push(flatEraNameCalc(formData.value.geologicalEra))
  values.push(flatEraNameCalc(formData.value.era))
  return values.join('/')
}
/** 获取字典标签 */
const getDictLabel = (type: string, value: string) => {
  const dict = getStrDictOptions(type).find((item) => item.value === value)
  return dict ? dict.label : '-'
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style scoped>
.info-item {
  margin-bottom: 16px;
  line-height: 1.5;
}
.info-label {
  font-weight: bold;
  color: #606266;
  margin-right: 8px;
}
.info-value {
  color: #303133;
}
</style>
